<template>
  <div class="about">
    <h1>This is an about page</h1>

    <el-row>
      <el-button @click="preview">默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger" @click="alipay">支付</el-button>
    </el-row>

    <br>
<!-- 大文件上传   -->
    <div>

        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
    </div>
  </div>
</template>
<script>

import SparkMD5 from 'spark-md5';

export default {
  data() {
    return {
      options: {
        target: 'http://localhost:8888/api/user/postFileUpload', // 目标上传 URL
        chunkSize: '2048000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      },
        attrs: {
          accept: 'image/*'
        }
    }
  },
  methods:{
    //支付方法
    alipay(){
      window.open("http://127.0.0.1:5555/toPay?orderId="+"88876960")
    },
    onFileAdded(file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    },
    preview(){
      //通过axios到后台
      this.axios.get("/user/preview").then(resp=>{
        alert(resp.data)
      })
      // location.href="http://localhost:8888/api/user/preview"  //文件预览
    }
  }
}
</script>
<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>